<template>
  <div class="transaction-statistics-container">
    <div class="page-header">
      <h2>交易统计</h2>
      <p>查看交易数据的统计分析和趋势图表</p>
    </div>

    <!-- 时间筛选 -->
    <div class="filter-bar">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-date-picker
            v-model:value="dateRange"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </a-col>
        <a-col :span="4">
          <a-select
            v-model:value="timeType"
            placeholder="时间维度"
            style="width: 100%"
          >
            <a-select-option value="day">日</a-select-option>
            <a-select-option value="week">周</a-select-option>
            <a-select-option value="month">月</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="handleQuery">
            <template #icon><search-outlined /></template>
            查询
          </a-button>
        </a-col>
      </a-row>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-card class="stats-card">
            <a-statistic
              title="今日交易金额"
              :value="statisticsData.todayAmount"
              :precision="2"
              suffix="元"
              :value-style="{ color: '#3f8600' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <a-statistic
              title="今日交易笔数"
              :value="statisticsData.todayCount"
              suffix="笔"
              :value-style="{ color: '#1890ff' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <a-statistic
              title="今日成功率"
              :value="statisticsData.todaySuccessRate"
              :precision="2"
              suffix="%"
              :value-style="{ color: '#52c41a' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <a-statistic
              title="今日手续费"
              :value="statisticsData.todayFee"
              :precision="2"
              suffix="元"
              :value-style="{ color: '#722ed1' }"
            />
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="交易金额趋势">
            <div class="chart-placeholder">
              <p>交易金额趋势图表</p>
              <p>（此处应集成ECharts或其他图表库）</p>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="交易笔数趋势">
            <div class="chart-placeholder">
              <p>交易笔数趋势图表</p>
              <p>（此处应集成ECharts或其他图表库）</p>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <a-row :gutter="16" style="margin-top: 16px">
        <a-col :span="12">
          <a-card title="支付渠道分布">
            <div class="chart-placeholder">
              <p>支付渠道分布饼图</p>
              <p>（此处应集成ECharts或其他图表库）</p>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="交易状态分布">
            <div class="chart-placeholder">
              <p>交易状态分布图表</p>
              <p>（此处应集成ECharts或其他图表库）</p>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'

const dateRange = ref()
const timeType = ref('day')

const statisticsData = reactive({
  todayAmount: 1256789.45,
  todayCount: 3456,
  todaySuccessRate: 98.76,
  todayFee: 12567.89
})

const handleQuery = () => {
  // 查询统计数据
  console.log('查询统计数据')
}
</script>

<style scoped>
.transaction-statistics-container {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
}

.filter-bar {
  margin-bottom: 24px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.stats-cards {
  margin-bottom: 24px;
}

.stats-card {
  text-align: center;
}

.charts-container {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 4px;
  color: #666;
}
</style>